import styles from './index.module.scss'
import cm from 'classnames'
import Image from '@c/image'
import Button from '../button'
import { devicePlatform } from '@/utils/utils'
import { useEffect, useState } from 'react'

const Index = ({ top = 70 }) => {
  const [isIphone, setPhone] = useState(false)
  useEffect(() => {
    const { isIOS } = devicePlatform()
    setPhone(isIOS)
  }, [])
  return (
    <footer className={cm(styles.footer, styles.footerPhone)} style={{ marginTop: top }}>
      <div className={cm(styles.footTop, 'hideWhenPhone')}>
        <Button link hover="opacity" href="/download" className={cm(styles.btn, styles.btnOne)}>
          <Image initSrc="/images/tv.png" src="/images/tv.png" alt="电视" className={styles.btnImg} />
          <span>电视端下载</span>
        </Button>
        <Button link hover="opacity" href="/download" className={styles.btn}>
          <Image initSrc="/images/tv.png" src="/images/android.png" alt="手机" className={styles.btnImg} />
          <span>安卓端下载</span>
        </Button>
      </div>
      <div className={cm(styles.footBottom, 'hideWhenPhone')}>
        <p>
          版权声明：如果来函说明本网站提供内容本人或法人版权所有。本网站在核实后，有权先行撤除，以保护版权拥有者的权益。
        </p>
        <p>邮箱地址：histarapp@outlook.com</p>
        <p>Copyright 2023 histar.tv All rights Reserved.</p>
      </div>

      {/* h5代码 */}
      <div className="hideWhenPc">
        <img src="/images/footer-downlaod.webp" alt="" className={styles.img} />
        <p className={styles.tip}>播放记录及会员权益多端共享</p>
        <div className={cm(styles.bottom, isIphone ? 'pb-14' : 'pb-28')}>
          <Button link hover="opacity" href="/download" className={styles.btn}>
            <Image initSrc="/images/tv.png" src="/images/android.png" alt="" className={styles.btnImg} />
            <span>手机</span>
          </Button>
          <Button link hover="opacity" href="/download?to=tv" className={styles.btn}>
            <Image initSrc="/images/tv.png" src="/images/tv.png" alt="" className={styles.btnImg} />
            <span>电视</span>
          </Button>
        </div>
      </div>
    </footer>
  )
}

export default Index
